.box {
  min-width: 375px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: @default-background-color;
  border: 1px solid #ccc;
  box-shadow: 0.3px 0.4px 0.7px rgba(0, 0, 0, 0.02),
    0.8px 1.1px 1.7px rgba(0, 0, 0, 0.028), 1.5px 2px 3.3px rgba(0, 0, 0, 0.035),
    2.7px 3.6px 5.8px rgba(0, 0, 0, 0.042), 5px 6.7px 10.9px rgba(0, 0, 0, 0.05),
    12px 16px 26px rgba(21, 13, 13, 0.07);
  border-radius: 10px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  position: relative;
  width: @grid-size*10;
  height: @grid-size*10;
  border: 3px solid #ccc;
  .rotate-box {
    position: absolute;
    transition: all 3s ease;
    transform: rotate(0deg);
  }
  .is-rotate {
    transform: rotate(360 * 3deg);
  }
}

.tools {
  margin: 30px 0 25px 0;
  display: flex;
  justify-content: space-around;
  width: 208px;
  height: 40px;
}
.storage-grids {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 20px;
}
.footer {
  display: flex;
  padding: 0px !important;
  justify-content: center;
  align-items: center;
  width: @grid-size*10.3;
  height: @grid-size*2;
  background: @default-background-color;
  background: url("@/assets/imgs/fence.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin-top: 10px;
  &-body {
    width: @grid-size*10;
    height: @grid-size;
  }
}
